<template>
	<el-row>
		<el-col :span="24">
			<el-table class="table" :data="tableData" style="width: 100%;text-align: center">
				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="zhcx-table-expand">
							<el-form-item label="车牌号码">
								<span>{{ props.row.plateNumber }}</span>
							</el-form-item>
							<el-form-item label="维修类型">
								<span>{{$dicCache.getNameByMarkAndVal('MAINTAINTYPE', props.row.maintainType)}}</span>
							</el-form-item>
							<el-form-item label="消费总额(元)">
								<span>{{ props.row.maintainCost }}</span>
							</el-form-item>
							<el-form-item label="经办人">
								<span>{{ props.row.maintainPerson }}</span>
							</el-form-item>
							<el-form-item label="维修时间">
								<span>{{ props.row.maintainDate }}</span>
							</el-form-item>
							<el-form-item label="备注">
								<span>{{ props.row.remark }}</span>
							</el-form-item>
						</el-form>
						<layerPhoto :filesIds="props.row.filesId"></layerPhoto>
					</template>
				</el-table-column>

				<el-table-column prop="plateNumber" label="车牌号码">
				</el-table-column>
				<el-table-column prop="maintainType" label="维修类型">
					<template slot-scope="scope">
						{{$dicCache.getNameByMarkAndVal('MAINTAINTYPE', scope.row.maintainType)}}
					</template>
				</el-table-column>
				<el-table-column prop="maintainCost" label="消费总额(元)">
				</el-table-column>
				<el-table-column prop="maintainPerson" label="经办人">
				</el-table-column>
				<el-table-column prop="maintainDate" label="维修时间">
				</el-table-column>
				<el-table-column prop="remark" label="备注">
				</el-table-column>
				<el-table-column prop="deleteFlag" label="状态">
					<template slot-scope="scope">
						{{['正常','已作废','作废中'][scope.row.deleteFlag]}}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="122">
					<template slot-scope="scope" v-if="scope.row.deleteFlag == '0'">
						<el-button class="option-btn" size="mini" @click="handleDelete(scope.$index, scope.row)">作废</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-col>
		<el-col :span="24" class="my-pagination">
			<el-pagination background layout="total, prev, pager, next" :total="total" :page-size="pageSize" :current-page="currentPage" @current-change="handleCurrentChange">
			</el-pagination>
		</el-col>
	</el-row>
</template>

<script>
	import layerPhoto from "@/components/layer-photo";
	export default {
		name: "wxby-table",
		components: {
			layerPhoto
		},
		mounted() {
			this.loadData();
		},
		data() {
			return {
				total: 1, //分页数据总条数
				currentPage: 1,
				pageSize: 8,
				tableData: []
			};
		},
		methods: {
			loadData() {
				this.$http.post('iem/car/getCarMaintainInfo', {
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					_method: "PATCH"
				}, d => {
					if(d.status == '1') {
						this.tableData = d.rows;
						this.total = d.total;
					} else {
						this.tableData = [];
						this.total = 0;
					}
				});
			},
			// 切页
			handleCurrentChange(val) {
				this.currentPage = val;
				this.loadData();
			},
			handleDelete(index, row) {
				let that = this;
				layer.confirm('确认作废？<br><font color="red">注意：此操作不可逆！</font>', {
					icon: 3,
					title: '提示'
				}, function(index) {
					that.$http.post('iem/car/delCarMaintain/' + row.bh, {
						_method: 'DELETE'
					}, function(d) {
						if(d.status == '1') {
							layer.close(index);
							that.loadData();
							layer.msg(d.msg);
						} else {
							layer.msg(d.msg, {
								shift: 6
							});
						}
					});
				});
			}
		}
	}
</script>

<style>
</style>